<template>
  <div id="video-container" class="video-container">
    <video
      v-if="url"
      id="videoPlayer"
      ref="videoPlayer"
      :style="{'width': '100%', 'height': '100%'}"
      :src="url"
      controls="false"
      preload="auto"
      playsInline
      autoplay
      webkit-playsinline
      x-webkit-airplay="true"
      x5-playsinline="true"
      crossOrigin="anonymous"
      @canplay="onVuePlayerStateChange(false, 'canplay')"
      @play="onVuePlayerStateChange(true, 'play')"
      @pause="onVuePlayerStateChange(false, 'pause')"
      @ended="onVuePlayerStateChange(false, 'ended')"
      @abort="onVuePlayerStateChange(false, 'abort')"
      @error="onVuePlayerStateChange(false, 'error')"
    />
    <!--    <videoPlayer-->
    <!--      ref="livePlayer"-->
    <!--      :playsinline="true"-->
    <!--      :options="playerOptions"-->
    <!--      class="video-player vjs-custom-skin"-->
    <!--    />-->
  </div>
</template>

<script>

import ObjectUtil from '../../../../utils/object-util'

export default {
  name: 'LocalVideoAreaView',
  components: {
  },
  props: {
    url: {
      type: [String],
      default: undefined
    }
  },
  data() {
    return {
      cameraAreaWidth: 0,
      cameraAreaHeight: 0,
      loading: true
    }
  },
  mounted() {
    const that = this
    this.$nextTick(() => {
      const container = document.getElementById('videoPlayer')
      if (ObjectUtil.notNull(container)) {
        that.cameraAreaWidth = container.clientWidth
        that.cameraAreaHeight = container.clientHeight
      }
    })
  },
  methods: {
    onVuePlayerStateChange(playing, name) {
      console.log(playing, name)
      if (name === 'error') {
        this.showErrorToast('播放失败，请重试')
      }
    },
    stop() {
      const that = this
      if (ObjectUtil.notNull(that.$refs.videoPlayer)) {
        that.$refs.videoPlayer.pause()
      }
    },
    play() {
      const that = this
      if (ObjectUtil.notNull(that.$refs.videoPlayer)) {
        that.$refs.videoPlayer.play()
      }
    },
    currentTime(time) {
      const that = this
      if (ObjectUtil.notNull(that.$refs.videoPlayer)) {
        if (ObjectUtil.notNull(time)) {
          that.$refs.videoPlayer.currentTime = time
        } else {
          return that.$refs.videoPlayer.currentTime
        }
      }
    },
    clipImage() {
      const canvas = document.createElement('canvas')
      const canvasCtx = canvas.getContext('2d')
      const video = document.getElementById('videoPlayer')
      // video.crossOrigin = 'Anonymous'
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      canvasCtx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
      const dataUrl = canvas.toDataURL('image/png')
      return dataUrl
    }
  }
}
</script>

<style scoped>
.video-container {
  position: relative;
}
</style>
